<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-info">
            <form id="operlog-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>请求人：<span style="color: red; ">*</span></label><input type="text" name="qqr" id="qqr" />
                        </li>
                        <li>
                            <label>请求人身份证号码：<span style="color: red; ">*</span></label><input type="text" name="qqrsfzhm" id="qqrsfzhm"/>
                        </li>
                        <li>
                            <label>查询事由：</label><input type="text" name="cxsy" id="cxsy"/>
                        </li>
                        <li>
                            <label>被查询人姓名：<span style="color: red; ">*</span></label><input type="text" name="xm" id="xm"/>
                        </li>
                        <li>
                            <label>被查询人身份证号码：<span style="color: red; ">*</span></label><input type="text" name="sfzhm" id="sfzhm"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()" id="sm"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-success btn-rounded btn-sm" onclick="clearfun()"><i class="fa fa-remove"></i>&nbsp;清除</a>
                        </li>

                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var prefix = ctx + "ncp/suspectedPerson"
    /*$("#sm").bind("click",function(){
        var qqr=$("#qqr").val();
        var qqrsfzhm=$("#qqrsfzhm").val();
        var xm=$("#xm").val();
        var sfzhm=$("#sfzhm").val();
        if(qqr=="" || qqr.length==0) {
            alert("请求人不能为空");
            return false;
        }
        if(qqrsfzhm=="" || qqrsfzhm.length==0) {
            alert("请求人身份证号码不能为空")
            return false;
        }
        if(xm=="" || xm.length==0) {
            alert("被查询人姓名不能为空")
            return false;
        }
        if(sfzhm=="" || sfzhm.length==0) {
            alert("被查询人身份证号码不能为空")
            return false;
        }
        var options = {
            url: prefix + "/list",
            sortName: "jcrq",
            sortOrder: "desc",
            search: false,
            showExport: false,
            columns: [{
                checkbox: true
            },
                {
                    field: 'xm',
                    title: '姓名'
                },
                {
                    field: 'sfzhm',
                    title: '身份证号码'
                },
                {
                    field: 'jcrq',
                    title: '接触日期'

                },
                {
                    field: 'jclx',
                    title: '接触类型'

                }]
        };
        $.table.init(options);
    });*/
    $(document).ready(function () {
        //调用函数，初始化表格
        //initTable();
        //当点击查询按钮的时候执行,bootstrap-table前端分页是不能使用搜索功能，所以可以提取出来自定义搜索。后台代码，在后面给出
        $("#sm").bind("click", initTable);
    });

    function initTable() {
        var qqr = $("#qqr").val();
        var qqrsfzhm = $("#qqrsfzhm").val();
        var xm = $("#xm").val();
        var sfzhm = $("#sfzhm").val();
        if (qqr == "" || qqr.length == 0) {
            alert("请求人不能为空");
            return false;
        }
        if (qqrsfzhm == "" || qqrsfzhm.length == 0) {
            alert("请求人身份证号码不能为空")
            return false;
        }
        if (xm == "" || xm.length == 0) {
            alert("被查询姓名不能为空")
            return false;
        }
        if (sfzhm == "" || sfzhm.length == 0) {
            alert("被查询人人身份证号码不能为空")
            return false;
        }

        //先销毁表格
        $('#bootstrap-table').bootstrapTable('destroy');
        $('#bootstrap-table').bootstrapTable({
            url: prefix + "/list",//请求后台的URL（*）
            method: 'post',
            dataType: "json",
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            dataField: 'rows',
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //设置为 true 会在表格底部显示分页条。
            pageNumber: 1,//初始化加载第一页，默认第一页
            pageSize: 10,//每页的记录行数（*）
            pageList: [10, 20, 30, 40],//可供选择的每页的行数（*），当记录条数大于最小可选择条数时才会出现
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            search: false, //是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框，上面jsp中已经给出，操作方法也已经给出
            striped: true,//隔行变色
            showColumns: false,//是否显示 内容列下拉框
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            clickToSelect: true,  //是否启用点击选中行
            data_local: "zh-US",//表格汉化
            sidePagination: "server", //服务端处理分页
            queryParamsType: "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
            queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
//            请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
//　　　　　　　queryParamsType = 'limit' ,返回参数必须包含limit, offset, search, sort, order
//            queryParamsType = 'undefined', 返回参数必须包含: pageSize, pageNumber, searchText, sortName, sortOrder.
//            返回false将会终止请求。
                return {//这里的params是table提供的
                    offset: params.offset,//从数据库第几条记录开始
                    limit: params.limit,//找多少条
                    qqr: $("#qqr").val(),//这个就是搜索框中的内容，可以自动传到后台，搜索实现在xml中体现
                    qqrsfzhm: $("#qqrsfzhm").val(),
                    xm: $("#xm").val(),
                    sfzhm: $("#sfzhm").val(),
                    cxsy: $("#cxsy").val()

                };
            },
            responseHandler: function (res) {
                //如果后台返回的json格式不是{rows:[{...},{...}],total:100},可以在这块处理成这样的格式
                return res;
            },
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'xm',
                        title: '姓名'
                    },
                    {
                        field: 'sfzhm',
                        title: '身份证号码'
                    },
                    {
                        field: 'jcrq',
                        title: '接触日期'

                    },
                    {
                        field: 'jclx',
                        title: '接触类型'

                    }],

            onLoadSuccess: function () {
            },
            onLoadError: function () {
                showTips("数据加载失败！");
            }
        });
    }
    function clearfun(){
        $("#qqr").val("");
        $("#qqrsfzhm").val("");
        $("#sfzhm").val("");
        $("#cxsy").val("");
        $("#xm").val("");
    };

</script>
</body>
</html>